<template>
  <div class="dashboard-container">
    <div class="header">
      <div class="user-info" v-if="userInfo">
        <p>管理员名：{{ userInfo.username }}</p>
        <p>管理区域：{{ userInfo.adminArea }}</p>
      </div>
      <div class="header-buttons">
        <button @click="logout" class="logout-button">退出登录</button>
        <button @click="goToEmail" class="email-button">个人邮箱</button>
      </div>
    </div>

    <div v-if="showLogs" class="logs-container">
      <div class="header-with-back">
        <h2>操作日志</h2>
        <button @click="backToHome" class="back-button">返回主页</button>
      </div>
      <div class="log-entry" v-for="log in pagedOperationLogs" :key="log.id">
        <p><strong>操作者：</strong>{{ log.sendMessage }}</p>
        <p><strong>接收者：</strong>{{ log.receiveMessage }}</p>
        <p><strong>操作内容：</strong>{{ log.message }}</p>
        <p><strong>操作时间：</strong>{{ formatDate(log.time) }}</p>
        <hr>
      </div>

      <div class="pagination">
        <button :disabled="currentPageLogs === 1" @click="prevPageLogs" class="pagination-button">上一页</button>
        <span class="page-info">第 {{ currentPageLogs }} 页，共 {{ totalPagesLogs }} 页</span>
        <button :disabled="currentPageLogs === totalPagesLogs" @click="nextPageLogs" class="pagination-button">下一页</button>
      </div>
    </div>

    <div class="content" v-if="!showLogs">
      <div class="main-header">
        <h1>管理员主页</h1>
      </div>
      
      <div class="filter-container">
        <label for="filter">选择内容：</label>
        <select id="filter" v-model="selectedFilter" @change="handleFilterChange">
          <option v-if="userInfo && userInfo.username !== 'superManager'" value="pending">待审核</option>
          <option value="district">本区文章</option>
          <option value="users">用户管理</option>
        </select>
      </div>

      <div class="operation-logs-container" v-if="userInfo && userInfo.username === 'superManager'">
        <button @click="fetchOperationLogs" class="operation-logs-button">查看操作日志</button>
      </div>

      <div class="article-list" v-if="showArticleList && articles && articles.length > 0">
        <h2>所有的文章</h2>
        <div class="batch-actions">
          <button @click="toggleSelectAll" class="select-all-button">全选</button>
          <button v-if="selectedFilter === 'pending' && userInfo && userInfo.username !== 'superManager'" @click="batchPassArticles" class="batch-pass-button">批量通过</button>
          <button v-if="selectedFilter === 'pending' && userInfo && userInfo.username !== 'superManager'" @click="batchNotPassArticles" class="batch-not-pass-button">批量不通过</button>
          <button v-if="selectedFilter === 'district'" @click="batchDeleteArticles" class="batch-delete-button">批量删除</button>
        </div>
        <div class="article-item" v-for="article in pagedArticles" :key="article.id">
          <div class="checkbox-container">
            <input type="checkbox" :value="article" v-model="selectedArticles" />
          </div>
          <h3>{{ article.title }}</h3>
          <div class="article-meta">
            <span>分区：{{ article.category }}</span>
            <span>作者：{{ article.writer }}</span>
            <span>发布时间：{{ article.publishTime }}</span>
          </div>
          <div class="article-actions">
            <button @click="viewArticle(article)" class="view-button">查看内容</button>
            <div class="action-buttons">
              <button v-if="selectedFilter === 'pending' && userInfo && userInfo.username !== 'superManager'" @click="passArticle(article)" class="pass-button">通过</button>
              <button v-if="selectedFilter === 'pending' && userInfo && userInfo.username !== 'superManager'" @click="notPassArticle(article)" class="not-pass-button">不通过</button>
              <button v-if="selectedFilter === 'district'" @click="deleteArticle(article)" class="delete-button">删除</button>
            </div>
          </div>
        </div>

        <div class="pagination">
          <button :disabled="currentPage === 1" @click="prevPage" class="pagination-button">上一页</button>
          <span class="page-info">第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
          <button :disabled="currentPage === totalPages" @click="nextPage" class="pagination-button">下一页</button>
        </div>
      </div>
      <div v-else-if="showArticleList">
        <p>暂无文章</p>
      </div>

      <div class="user-management" v-if="showUserManagement && users && users.length > 0">
        <h2>用户列表</h2>
        <div class="batch-actions">
          <button @click="toggleSelectAllUsers" class="select-all-button">全选</button>
          <button v-if="userInfo && userInfo.username === 'superManager'" @click="batchUnlockUsers" class="batch-unlock-button">批量解封</button>
          <button @click="batchBanUsers" class="batch-ban-button">批量禁用</button>
        </div>
        <div class="user-item" v-for="user in users" :key="user.id">
          <div class="checkbox-container">
            <input type="checkbox" :value="user.id" v-model="selectedUserIds" />
          </div>
          <p>用户名：{{ user.userName }}</p>
          <p>ID:{{ user.id }}</p>
          <p>状态：{{ getUserStatus(user.status) }}</p>
          <div class="user-actions">
            <button v-if="userInfo && userInfo.username === 'superManager'" @click="unlockUser(user.id)" class="unlock-button">解封</button>
            <button @click="banUser(user.id)" class="ban-button">禁用</button>
          </div>
        </div>
      </div>
      <div v-else-if="showUserManagement">
        <p>暂无用户</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  data() {
    return {
      userInfo: null, // 管理员信息
      articles: [], // 文章列表
      users: [], // 用户列表
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的文章数
      selectedFilter: 'pending', // 当前选择的筛选选项：pending（待审核）、district（本区文章）、users（用户管理）
      showArticleList: true, // 是否显示文章列表
      showUserManagement: false, // 是否显示用户管理列表
      selectedArticles: [], // 批量选择的文章
      selectedUserIds: [], // 批量选择的用户ID
      operationLogs: [], // 操作日志列表
      showLogs: false, // 是否显示操作日志
      currentPageLogs: 1, // 操作日志当前页码
      pageSizeLogs: 5, // 操作日志每页显示的数量
    };
  },
  setup() {
    const router = useRouter();
    return { router };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.articles.length / this.pageSize);
    },
    pagedArticles() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.articles.slice(start, end);
    },
    totalPagesLogs() {
      return Math.ceil(this.operationLogs.length / this.pageSizeLogs);
    },
    pagedOperationLogs() {
      const start = (this.currentPageLogs - 1) * this.pageSizeLogs;
      const end = start + this.pageSizeLogs;
      return this.operationLogs.slice(start, end);
    }
  },
  created() {
    this.fetchUserInfo(); // 获取管理员信息
  },
  methods: {
    formatDate(dateString: string) {
      const options: Intl.DateTimeFormatOptions = { 
        year: 'numeric', 
        month: 'numeric', 
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      };
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN', options);
    },
    async fetchUserInfo() {
      const token = localStorage.getItem('token');
      const username = localStorage.getItem('username');
      if (!token || !username) {
        this.router.push('/');
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerInformation?username=${username}`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          }
        });

        const data = await response.json();

        if (response.ok) {
          this.userInfo = data;
          localStorage.setItem('userInfo', JSON.stringify(data));
          
          if (this.userInfo.username === 'superManager') {
            this.selectedFilter = 'district';
          } else {
            this.selectedFilter = 'pending';
          }
          this.handleFilterChange(); // 获取对应的文章列表或用户列表
        } else {
          alert('获取管理员信息失败！');
          this.router.push('/');
        }
      } catch (error) {
        console.error('Error fetching admin info:', error);
        alert('获取管理员信息时出错！');
        this.router.push('/');
      }
    },
    async fetchUserArticles(filter: string) {
      const token = localStorage.getItem('token');
      const username = localStorage.getItem('username');
      if (!token || !username) {
        return;
      }

      try {
        let url = '';
        if (filter === 'pending' || filter === 'district') {
          url = `http://localhost:8080/lzl_content2_war_exploded/managerArticlePrint?username=${username}&type=${filter === 'pending' ? 0 : 1}`;
        } else {
          this.showArticleList = false;
          this.showUserManagement = false;
          return;
        }

        const response = await fetch(url, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          }
        });

        const data = await response.json();

        if (response.ok) {
          this.articles = data;
          this.currentPage = 1; // 重置到第一页
          this.showArticleList = true;
          this.showUserManagement = false;
        } else {
          alert('获取文章信息失败！');
          this.showArticleList = true;
          this.showUserManagement = false;
        }
      } catch (error) {
        console.error('Error fetching user articles:', error);
        alert('获取文章信息时出错！');
        this.showArticleList = true;
        this.showUserManagement = false;
      }
    },
    async fetchUsers() {
      const token = localStorage.getItem('token');
      const username = localStorage.getItem('username');
      if (!token || !username) {
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/ManagerGetUser?username=${username}`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          }
        });

        const data = await response.json();

        if (response.ok) {
          this.users = data;
          this.showUserManagement = true;
          this.showArticleList = false;
        } else {
          alert('获取用户信息失败！');
          this.showUserManagement = true;
          this.showArticleList = false;
        }
      } catch (error) {
        console.error('Error fetching users:', error);
        alert('获取用户信息时出错！');
        this.showUserManagement = true;
        this.showArticleList = false;
      }
    },
    logout() {
      localStorage.removeItem('token');
      localStorage.removeItem('userInfo');
      localStorage.removeItem('username');
      localStorage.removeItem('loginType');
      this.router.push('/');
    },
    viewArticle(article) {
      this.router.push({
        name: 'article',
        query: { article: JSON.stringify(article) }
      });
    },
    async passArticle(article) {
      const token = localStorage.getItem('token');
      if (!token || !this.userInfo) {
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerArticlePass`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({
            writer: article.writer,
            title: article.title,
            category: article.category,
            adminName: this.userInfo.username
          })
        });

        const data = await response.json();

        if (response.ok) {
          alert(data.message || '审核通过！');
          this.fetchUserArticles(this.selectedFilter); // 刷新当前筛选的文章列表
        } else {
          alert(data.message || '审核失败！');
        }
      } catch (error) {
        console.error('Error passing article:', error);
        alert('审核时出错！');
      }
    },
    async batchPassArticles() {
      if (this.selectedArticles.length === 0) {
        alert('请至少选择一篇文章！');
        return;
      }

      const token = localStorage.getItem('token');
      if (!token || !this.userInfo) {
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerArticlePassBatch`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({
            adminName: this.userInfo.username,
            articles: this.selectedArticles.map(article => ({
              writer: article.writer,
              title: article.title,
              category: article.category
            }))
          })
        });

        const data = await response.json();

        if (response.ok) {
          alert(data.message || '批量审核通过成功！');
          this.selectedArticles = [];
          this.fetchUserArticles(this.selectedFilter); // 刷新当前筛选的文章列表
        } else {
          alert(data.message || '批量审核失败！');
        }
      } catch (error) {
        console.error('Error passing articles in batch:', error);
        alert('批量审核时出错！');
      }
    },
    async notPassArticle(article) {
      const token = localStorage.getItem('token');
      if (!token || !this.userInfo) {
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerArticleNotPass`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({
            writer: article.writer,
            title: article.title,
            category: article.category,
            adminName: this.userInfo.username
          })
        });

        const data = await response.json();

        if (response.ok) {
          alert(data.message || '审核不通过！');
          this.fetchUserArticles(this.selectedFilter); // 刷新当前筛选的文章列表
        } else {
          alert(data.message || '操作失败！');
        }
      } catch (error) {
        console.error('Error not passing article:', error);
        alert('操作时出错！');
      }
    },
    async batchNotPassArticles() {
      if (this.selectedArticles.length === 0) {
        alert('请至少选择一篇文章！');
        return;
      }

      const token = localStorage.getItem('token');
      if (!token || !this.userInfo) {
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerArticleNotPassBatch`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({
            adminName: this.userInfo.username,
            articles: this.selectedArticles.map(article => ({
              writer: article.writer,
              title: article.title,
              category: article.category
            }))
          })
        });

        const data = await response.json();

        if (response.ok) {
          alert(data.message || '批量审核不通过成功！');
          this.selectedArticles = [];
          this.fetchUserArticles(this.selectedFilter); // 刷新当前筛选的文章列表
        } else {
          alert(data.message || '批量审核不通过失败！');
        }
      } catch (error) {
        console.error('Error not passing articles in batch:', error);
        alert('批量审核不通过时出错！');
      }
    },
    async deleteArticle(article) {
      const token = localStorage.getItem('token');
      if (!token || !this.userInfo) {
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerArticleDelete`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({
            writer: article.writer,
            title: article.title,
            category: article.category,
            adminName: this.userInfo.username
          })
        });

        const data = await response.json();

        if (response.ok) {
          alert(data.message || '文章已删除！');
          this.fetchUserArticles(this.selectedFilter); // 刷新当前筛选的文章列表
        } else {
          alert(data.message || '删除文章失败！');
        }
      } catch (error) {
        console.error('Error deleting article:', error);
        alert('删除文章时出错！');
      }
    },
    async batchDeleteArticles() {
      if (this.selectedArticles.length === 0) {
        alert('请至少选择一篇文章！');
        return;
      }

      const token = localStorage.getItem('token');
      if (!token || !this.userInfo) {
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerArticleDeleteBatch`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({
            adminName: this.userInfo.username,
            articles: this.selectedArticles.map(article => ({
              writer: article.writer,
              title: article.title,
              category: article.category
            }))
          })
        });

        const data = await response.json();

        if (response.ok) {
          alert(data.message || '批量删除成功！');
          this.selectedArticles = [];
          this.fetchUserArticles(this.selectedFilter); // 刷新当前筛选的文章列表
        } else {
          alert(data.message || '批量删除失败！');
        }
      } catch (error) {
        console.error('Error deleting articles in batch:', error);
        alert('批量删除时出错！');
      }
    },
    toggleSelectAll() {
      if (this.selectedArticles.length === this.articles.length) {
        this.selectedArticles = [];
      } else {
        this.selectedArticles = [...this.articles];
      }
    },
    toggleSelectAllUsers() {
      if (this.selectedUserIds.length === this.users.length) {
        this.selectedUserIds = [];
      } else {
        this.selectedUserIds = this.users.map(user => user.id);
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    handleFilterChange() {
      if (this.selectedFilter === 'users') {
        this.fetchUsers();
      } else {
        this.fetchUserArticles(this.selectedFilter);
      }
    },
    getUserStatus(status) {
      const statusMap = {
        1: '游戏区禁用',
        2: '科技区禁用',
        3: '体育区禁用',
        4: '军事区禁用',
        5: '农业区禁用',
        6: '艺术区禁用',
        7: '全区禁用',
        8: '正常'
      };
      return statusMap[status] || '未知状态';
    },
    async unlockUser(userId) {
      const token = localStorage.getItem('token');
      const username = localStorage.getItem('username');
      if (!token || !username) {
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerUserManagement`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({
            operation: 1,
            adminName: username,
            userId: userId
          })
        });

        const data = await response.json();

        if (response.ok) {
          alert(data.message || '解封成功！');
          this.fetchUsers(); // 刷新用户列表
        } else {
          alert(data.message || '解封失败！');
        }
      } catch (error) {
        console.error('Error unlocking user:', error);
        alert('解封时出错！');
      }
    },
    async banUser(userId) {
      const token = localStorage.getItem('token');
      const username = localStorage.getItem('username');
      if (!token || !username) {
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerUserManagement`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({
            operation: 0,
            adminName: username,
            userId: userId
          })
        });

        const data = await response.json();

        if (response.ok) {
          alert(data.message || '禁用成功！');
          this.fetchUsers(); // 刷新用户列表
        } else {
          alert(data.message || '禁用失败！');
        }
      } catch (error) {
        console.error('Error banning user:', error);
        alert('禁用时出错！');
      }
    },
    async batchUnlockUsers() {
      if (this.selectedUserIds.length === 0) {
        alert('请至少选择一个用户！');
        return;
      }

      const token = localStorage.getItem('token');
      const username = localStorage.getItem('username');
      if (!token || !username) {
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerUserManagementBatch`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({
            operation: 1,
            adminName: username,
            userIds: this.selectedUserIds
          })
        });

        const data = await response.json();

        if (response.ok) {
          alert(data.message || '批量解封成功！');
          this.selectedUserIds = [];
          this.fetchUsers(); // 刷新用户列表
        } else {
          alert(data.message || '批量解封失败！');
        }
      } catch (error) {
        console.error('Error unlocking users in batch:', error);
        alert('批量解封时出错！');
      }
    },
    async batchBanUsers() {
      if (this.selectedUserIds.length === 0) {
        alert('请至少选择一个用户！');
        return;
      }

      const token = localStorage.getItem('token');
      const username = localStorage.getItem('username');
      if (!token || !username) {
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerUserManagementBatch`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({
            operation: 0,
            adminName: username,
            userIds: this.selectedUserIds
          })
        });

        const data = await response.json();

        if (response.ok) {
          alert(data.message || '批量禁用成功！');
          this.selectedUserIds = [];
          this.fetchUsers(); // 刷新用户列表
        } else {
          alert(data.message || '批量禁用失败！');
        }
      } catch (error) {
        console.error('Error banning users in batch:', error);
        alert('批量禁用时出错！');
      }
    },
    async fetchOperationLogs() {
      this.showLogs = false;
      const token = localStorage.getItem('token');
      if (!token || !this.userInfo) {
        return;
      }

      if (this.userInfo.username !== 'superManager') {
        alert('您没有权限查看操作日志！');
        return;
      }

      try {
        const response = await fetch(`http://localhost:8080/lzl_content2_war_exploded/managerLog?username=${this.userInfo.username}`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          }
        });

        const data = await response.json();

        if (response.ok) {
          this.operationLogs = data;
          this.currentPageLogs = 1;
          this.showLogs = true;
        } else {
          alert('获取操作日志失败！');
        }
      } catch (error) {
        console.error('Error fetching operation logs:', error);
        alert('获取操作日志时出错！');
      }
    },
    prevPageLogs() {
      if (this.currentPageLogs > 1) {
        this.currentPageLogs--;
      }
    },
    nextPageLogs() {
      if (this.currentPageLogs < this.totalPagesLogs) {
        this.currentPageLogs++;
      }
    },
    backToHome() {
      this.showLogs = false;
    },
    goToEmail() {
      this.router.push('/email');
    }
  }
});
</script>

<style scoped>
.dashboard-container {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-info p {
  margin: 5px 0;
}

.header-buttons {
  display: flex;
  gap: 10px;
}

.logout-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.logout-button:hover {
  background-color: #45a049;
}

.logout-button:hover {
  background-color: #45a049;
}

.email-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.email-button:hover {
  background-color: #0b7dda;
}

.content {
  padding: 20px 0;
}

.main-header {
  margin-bottom: 20px;
}

.main-header h1 {
  color: #333;
  margin: 0 0 20px 0;
}

.filter-container {
  margin-bottom: 20px;
}

.filter-container label {
  display: inline-block;
  margin-right: 10px;
}

.filter-container select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.operation-logs-container {
  margin-bottom: 20px;
}

.operation-logs-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.operation-logs-button:hover {
  background-color: #0b7dda;
}

.article-list {
  margin-top: 20px;
}

.batch-actions {
  margin-bottom: 15px;
}

.batch-pass-button, .batch-not-pass-button, .batch-delete-button, .select-all-button, .batch-unlock-button, .batch-ban-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.batch-pass-button:hover, .batch-not-pass-button:hover, .batch-delete-button:hover, .select-all-button:hover, .batch-unlock-button:hover, .batch-ban-button:hover {
  background-color: #0b7dda;
}

.article-item {
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  background-color: #f9f9f9;
  position: relative;
}

.checkbox-container {
  position: absolute;
  top: 15px;
  right: 15px;
}

.article-item h3 {
  margin-top: 0;
  color: #333;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 10px 0;
  color: #666;
}

.article-meta span {
  white-space: nowrap;
}

.article-actions {
  display: flex;
  align-items: center;
}

.view-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.view-button:hover {
  background-color: #0b7dda;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.pass-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.pass-button:hover {
  background-color: #45a049;
}

.not-pass-button, .delete-button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.not-pass-button:hover, .delete-button:hover {
  background-color: #d32f2f;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.pagination-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin: 0 10px;
}

.pagination-button:hover {
  background-color: #0b7dda;
}

.pagination-button:disabled {
  background-color: #f1f1f1;
  color: #999;
  cursor: not-allowed;
}

.page-info {
  margin: 0 10px;
  color: #666;
}

.user-management {
  margin-top: 20px;
}

.user-item {
  border: 1px solid #eee;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 5px;
  background-color: #f9f9f9;
  position: relative;
}

.user-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.unlock-button, .ban-button {
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.unlock-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  margin-right: 10px;
}

.unlock-button:hover {
  background-color: #45a049;
}

.ban-button {
  background-color: #f44336;
  color: white;
  border: none;
}

.ban-button:hover {
  background-color: #d32f2f;
}

.logs-container {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.header-with-back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.back-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.back-button:hover {
  background-color: #0b7dda;
}

.log-entry {
  margin-bottom: 20px;
}

.log-entry p {
  margin: 10px 0;
}

.log-entry hr {
  margin: 10px 0;
  border: none;
  border-top: 1px solid #ddd;
}
</style>
